<template>
  <div class="w-full bg-zinc-200">
    <div class="px-2.5 text-xl h-12 leading-[48px]">
      <span>
        <span v-if="user === null" class="hover:cursor-pointer hover:text-rose-500 float-left"
          @click="$router.push('/login')">未登录</span>
        <span v-else class="hover:cursor-pointer hover:text-rose-500 float-left overflow-hidden mt-1 rounded-3xl"
          @click="$router.push('/myInfo')">
          <img class="w-10 h-10 object-cover" :src="`http://127.0.0.1:8081${userData.userImage}`">
        </span>
      </span>
      <ul class="left float-left">
        <li class="hover:cursor-pointer hover:text-rose-500 inline px-1.5" @click="$router.push('/')">首页</li>
        <li class="hover:cursor-pointer hover:text-rose-500 inline px-1.5" @click="$router.push('/cart')">购物车</li>
        <li class="hover:cursor-pointer hover:text-rose-500 inline px-1.5" @click="$router.push('/collection')">收藏夹</li>
      </ul>
      <ul class="right float-right">
        <li class="hover:cursor-pointer hover:text-rose-500 inline px-2.5" @click="$router.push('/business')">商家登录</li>
        <li class="hover:cursor-pointer hover:text-rose-500 inline px-2.5" @click="logout">退出</li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      user: window.localStorage.getItem( "userToken" ),
      userData: [],
    }
  },
  mounted() {   // 钩子函数
    this.getData()
  },
  methods: {
    getData() {
      axios( {
        url: 'http://127.0.0.1:8081/api/selectUserByUserName',
        method: 'post',
        params: {
          token: this.user,
          userName: window.localStorage.getItem( "userName" ),
        }
      } ).then( res => {
        if ( res.data.success === false ) { // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "userToken" )
        } else {
          // 数据接收
          this.userData = res.data.data.user
        }
      } )
    },
    logout() {
      localStorage.removeItem( 'userToken' )
      this.$router.push( '/' )
      location.reload()
    },
  }

}
</script>

<style scoped ></style>